<template>
	<div>
		<el-card shadow="hover" header="硬件配置" body-style="padding:8px; ">
			<div class="system-hardware-container">
				<el-form :inline="false" :model="formInline" size="mini" v-for="r in form" :key="r.code">
					<el-form-item label-width="130px" :label="r.title" style="padding-bottom: 5px">
						<el-col :span="11">
							<el-select v-model="r.res1" placeholder="请选择...">
								<el-option v-for="item in r.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-col>
						<el-col style="width: 30px; text-align: center">
							<span> - </span>
						</el-col>
						<el-col :span="7">
							<el-input v-model="r.res2" />
						</el-col>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
		<el-row justify="left" style="padding-left: 130px; padding-top: 50px">
			<el-button type="primary" icon="el-icon-check" @click="saveHardware" size="medium">保 存</el-button>
		</el-row>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import { queryHardwareDicItem } from '/@/api/dic';
import { saveHardwareConfig, queryHardwareConfig } from '/@/api/common/index';
export default {
	name: 'systemHardware',
	components: {},
	setup() {
		const state = reactive({
			form: [
				{ title: '条码类型配置', res1: '', res2: '', code: 'yjpz_tiaomaleixin', options: [] },
				{ title: '打印机配置', res1: '', res2: '', code: 'yjpz_dayinji', options: [] },
				{ title: '电子标签配置', res1: '', res2: '', code: 'yjpz_dianzibiaoqian', options: [] },
				{ title: 'RFID打印机配置', res1: '', res2: '', code: 'yjpz_rfiddayin', options: [] },
				{ title: 'RFID检测配置', res1: '', res2: '', code: 'yjpz_rfidjiance', options: [] },
				{ title: '手持机配置', res1: '', res2: '', code: 'yjpz_shouciji', options: [] },
				{ title: '读卡器配置', res1: '', res2: '', code: 'yjpz_dukaqi', options: [] },
				{ title: '高拍仪配置', res1: '', res2: '', code: 'yjpz_gaopaiyi', options: [] },
				{ title: '智能柜配置', res1: '', res2: '', code: 'yjpz_zhinenggui', options: [] },
				{ title: '密集柜配置', res1: '', res2: '', code: 'yjpz_mijigui', options: [] },
				{ title: '签字版配置', res1: '', res2: '', code: 'yjpz_qianziban', options: [] },
				{ title: '环境配置', res1: '', res2: '', code: 'yjpz_huajin', options: [] },
				{ title: '远程示证配置', res1: '', res2: '', code: 'yjpz_yuanchengshizeng', options: [] },
				{ title: '监控配置', res1: '', res2: '', code: 'yjpz_jiankuang', options: [] },
				{ title: '门禁配置', res1: '', res2: '', code: 'yjpz_menjin', options: [] },
				{ title: '服务器配置', res1: '', res2: '', code: 'yjpz_fuwuqi', options: [] },
			],
		});
		async function loadHardware() {
			
			await queryHardwareConfig().then((res: any) => {
				var rows = JSON.parse(res.data);
				for (var i = 0; i < rows.length; i++) {
					var row1 = rows[i];
					var row = state.form.filter(function (a) {
						return a.code == row1.code;
					})[0];
					row.res1 = row1.res1;
					row.res2 = row1.res2;
					
				}
			});
		}
		async function loadData() {
			await queryHardwareDicItem().then((res: any) => {
				var data = res.data;
				for (var i = 0; i < data.length; i++) {
					var dic = data[i];
					var row = state.form.filter(function (a) {
						return a.code == dic.code;
					})[0];
					debugger
					row.options = (dic.child || []).map(function (a) {
						return { value: a.code, label: a.name };
					});
					row.options.unshift({ value: '', label: '请选择...' });
				}
				loadHardware();
			});
		}
		async function saveHardware() {
			var data = state.form.map(function (a) {
				return { title: a.title, res1: a.res1, res2: a.res2, code: a.code };
			});
			await saveHardwareConfig({ configJson: JSON.stringify(data) }).then((res: any) => {
				if (res.success) {
					ElMessageBox({ message: '保存成功', type: 'success' });
				} else {
					ElMessageBox({ message: '保存失败', type: 'error' });
				}
			});
		}
		loadData();
		return {
			...toRefs(state),
			saveHardware,
		};
	},
};
</script>
<style scoped>
.el-form {
	padding-bottom: 2px;
}
</style>
